<template>
    <div class="payFinish">
        <IHeader class="header" back="true" title="支付完成" finish="true"></IHeader>
        <div class="finish-header">
            <img :src="imgPath('fabric_dealer.png')" class="finishImg">
            <text class="finishBig">订单支付成功</text>
            <div class="method">
                <div class="method-item">
                    <text class="typeleft">支付方式：</text>
                    <text class="typeright">微信支付</text>
                </div>
                <div class="method-item">
                    <text class="typeleft">支付金额：</text>
                    <text class="typeright">￥</text>
                    <text class="typeright">{{totalPrice}}</text>
                </div>
            </div>
        </div>
        <div class="payBtn">
            <div class="Btn" @click="pushToWaitGain">
                <text class="btntext">查看订单详情</text>
            </div>
        </div>
    </div>
</template>

<script>
import IHeader from '@/components/header'
const modal = weex.requireModule('modal')
export default {
  name: 'payFinish',
  data () {
    return {
      totalPrice: '',
      orderId: ''
    }
  },
  methods: {
    pushToWaitGain () {
      const that = this
      that.$router.push({path: '/mine/waitGain', query: {orderId: that.orderId}})
    }
  },
  created: function () {
    // this.$route.query.params
    this.totalPrice = this.$route.query.params
    this.orderId = this.$route.query.orderId
    modal.toast({
      message: this.orderId
    })
  },
  components: {
    IHeader
  }
}
</script>
<style>
    .payFinish{
        background-color: rgb(245,245,245);
    }
</style>
<style scoped>
    .finish-header{
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 88px;
        padding-top:56px;
        padding-bottom:56px;
        background-color: #fff;
    }
.finishImg{
    width:131px;
    height:131px;
}
    .method{
       padding-top: 24px;
        padding-bottom: 24px;
        padding-left: 16px;
        padding-right: 16px;
        flex-direction: column;
        border-width: 1px;
        border-color: rgb(206,206,206);
        border-style:dashed;
        margin-top:15px;
    }
    .method-item{
        flex-direction: row;
        align-items: center;
    }
    .typeleft{
        color:rgb(134,134,134);
        font-family:medium;
        font-size: 28px;
    }
    .typeright{
        color:rgb(70,70,70);
        font-family:medium;
        font-size: 28px;
    }
    .finishBig{
        margin-top:25px;
    }
    .payBtn{
        margin-top:30px;
        flex-direction:row;
        justify-content: center;
        align-items: center;
        margin-top:98px;
    }
    .Btn{
        background-image: linear-gradient(to right, #2b3040, #7d88a4);
        height:80px;
        padding-left:195px;
        padding-right:195px;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
    }
    .btntext{
        color:rgb(255,255,255);
        font-size:30px;
        font-family:medium;
    }
</style>
